<html>
  <head>
    <title>ToDoList</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="main">
      <div class="row">
        <input class="input" type="text" id="inputtext" placeholder="请输入任务，并点击回车或按钮以添加" onkeyup="keyup(event)"/>
        <input type="button" class="bt" value="添加" onclick="handleClick(event)" />
      </div>
      <div id="todogroup">
      </div>
    </div>
  </body>
  <script lang="javascript">
    var intCnt = 0;

    function init(){
      // document.getElementById("button2").onclick = handleClick;
    }

    function keyup(e){
      console.log(e);
      if(e.keyCode == 13){
        handleClick(e);
      }
    }

    function handleClick(e){
      console.log('handleClick');
      console.log(e);
      var temp = getValue();

      // document.getElementById("todogroup").innerHTML += head+temp+"</div>";
      // var div = document.createElement('div');
      // div.innerText = temp;
      // document.getElementById("todogroup").append(div);
      // document.getElementsByClassName('main')[0].style = "background-color: rgb(255, 212, 244);"; 

      document.getElementById("todogroup").innerHTML += "<div class='item' id='todo"
          +intCnt+"'><input type='checkbox' name='todocheck'><div class='item-value'>"
          +temp+"</div><button class='item-del' type='button' onclick='deleteByIndex("
          +intCnt+")'>删除</button></div>";
      document.getElementById('inputtext').value = '';
      intCnt++;
    }

    function deleteByIndex(index){
      document.getElementById("todo" + index).remove();
    }

    function getValue(){
      var temp = document.getElementById("inputtext");
      console.log(temp.value);
      return temp.value;
    }

    function enter(id){
      document.getElementById(id).style='background-color:#3e3e3e'
    }

    function leave(id){
      document.getElementById(id).style='background-color:#FFFFFF'
    }

    init();
  </script>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .main {
      padding: 8px;
      border: 1px solid #333333;
      border-radius: 8px;
    }

    .row {
      display: flex;
    }

    .item {
      display: flex;
      align-items: center;
      margin: 6px;
      padding: 3px;
      background-color: #FFFFFF;
      border: 1px solid #939393;
      border-radius: 2px;
    }

    .item:hover{
      background-color: #a1a1a173;
      transform: scale(1.0);
    }

    .item-value {
      flex-grow: 1;
      color: #333333;
    }

    .item-del {
      color: aliceblue;
      background-color: rgba(250, 107, 107, 0.875);
      border: 0px;
      border-radius: 4px;
      opacity: 0;
    }

    .item-del:hover{
      opacity: 1;
    }

    .item:hover .item-del{
      opacity: 1;
    }

    .input{
      width: 350px;
      padding: 8px;
      border-radius: 4px;
      border: 1px solid #939393;
      outline: none;

    }

    .input:focus{
      box-shadow: 4px 4px 4px #b1bef4;
      border: 1px solid #b1bef4;
    }

    .bt{
      background-color: rgba(151, 174, 161, 0.892);
      border-radius: 4px;
      border: 1px solid #939393;
      width: 50px;
    }
  </style>
</html>
